<template>
	<div>
		<div >
			<div class="flex flex-col-center">
				<div v-if="row=='shu'" :style="[shuStyle]"></div>
				<div class="title" :style="[titleStyle]">{{title}}</div>
			</div>
			<div v-if="row=='heng'" :style="[shuStyle]" style="transform: rotate(90deg);"></div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'baseBlock',
		props: {
			row: {
				type: String,
				default: 'shu'
			},
			isFontWeight:{
				type: Boolean,
				default:true
			},
			title: {
				type: String,
				default: ''
			},
			color:{
				type: String,
				default: '#1480f9'
			},
			fontSize:{
				type: Number,
				default:20
			},
			bgColor: {
				type: String,
				default: '#1480f9'
			},
			width: {
				type: Number,
				default: 5
			},
			height: {
				type: Number,
				default: 30
			},

			borderRadius: {
				type: Number,
				default: 20
			},
			Top: {
				type: Number,
				default: 0
			},
			Left: {
				type: Number,
				default: 0
			},
			Bottom: {
				type: Number,
				default: 0
			},
			Right: {
				type: Number,
				default: 0
			},
			offer: {
				type: Array,
				default:()=>[]
			},
		},
		computed: {
			// 左边竖条的样式
			shuStyle() {
				return {
					background: this.bgColor,
					width: this.width + 'px',
					height: this.height + 'px',
					borderRadius: this.borderRadius + 'px',
					marginTop: this.Top + 'px',
					marginLeft: this.Left + 'px',
					marginBottom: this.Bottom + 'px',
					marginRight: this.Right + 'px',
				   
				}
			},
			// 标题的样式
			titleStyle(){
				return{
					color:this.color,
					fontSize:this.fontSize + 'px',
					fontWeight:this.isFontWeight?'bold':'normal',
				}
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style scoped>

</style>
